import React, { Component } from 'react';

// 面试题?  react 中的数据请求最好在componentDidMount生命周期?
// 不能再constructor ,因为该生命周期函数执行的是一个初始化的操作, 如果在该生命周期进行数据请求,
// 当发生错误的时候, 因为咱们的js 是单线程, 导致后面的render 不在执行, 这样用户就无法看到页面

// 不能再render 中,因为render 初始化执行, 数据更新还执行,而请求数据势必要更新state状态,state 状态更新,势必重新执行render
// 会导致死循环


// 导入axios 
import axios from 'axios';
// 导入子组件
import Myclschild1 from './Myclschild1';
import Myclschild2 from './Myclschild2';
class Mycls extends Component {
    constructor(props) {
        super(props)
        // 该生命周期一般进行 state 的初始化或 事件绑定this(实例对象)
        // 执行时间: 只有初始化执行
        // console.log('constructor');
        // console.log(a);
    }
    state = {
        schoolArr: [],
        isshow: true
    }
    render() {
        // render: 类组件中必须要使用生命周期

        // 执行时间: 在初始化 和数据更新都执行
        // console.log('render');
        return (
            <div>
                我是页面
                <ul>
                    {
                        this.state.schoolArr.map((item) => {
                            return <li key={item.id}>{item.school_name}</li>
                        })
                    }
                </ul>
                {/* 显示或隐藏子组件 */}
                <button onClick={() => {
                    this.setState({
                        isshow: !this.state.isshow
                    })
                }}>显示/隐藏</button>
                {
                    this.state.isshow ? <Myclschild1></Myclschild1> : <Myclschild2></Myclschild2>
                }
            </div>
        );
    };
    componentDidMount() {
        // componentDidMount : dom挂载完毕执行的生命周期
        // 执行时间: 初始化执行,数据更新不执行
        // axios.get('https://api.i-lynn.cn/college', {
        //     params: {
        //         page: 1
        //     }
        // }).then(res => {
        //     console.log(res);
        //     this.setState({
        //         schoolArr: res.data.data.list1
        //     })
        // })
    };
    componentDidUpdate() {
        // 
        // console.log('componentDidUpdate');
    };

    // componentWillUnmount() {
    //     console.log('componentWillUnmount');
    // }

}

export default Mycls;
